<template>
  <div>
    <Editor v-model="content" :init="myTinyInit" :disabled="props.readonly"></Editor>
  </div>
</template>

<script setup name="TinymceEditor">
import {computed, defineEmits, defineProps, onMounted, reactive, ref, watch} from 'vue'
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/icons/default/icons'
import 'tinymce/themes/silver'
import 'tinymce/models/dom/model'
/* 按需引入插件 */
import 'tinymce/plugins/image'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/link'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/code'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/visualchars'
import 'tinymce/plugins/fullscreen'

const props = defineProps({
  readonly: {
    type: Boolean,
    default: false,
  },
  modelValue: {
    type: String,
    default: '',
  },
  plugins: {
    type: [String, Array],
    default: 'lists link image table wordcount code preview fullscreen',
  },
  toolbar: {
    type: [String, Array],
    default: 'undo redo formatselect fontsize bold italic forecolor backcolor lineheight alignleft aligncenter alignright alignjustify bullist numlist subscript superscript outdent indent table image code preview fullscreen',
  },
})
const emit = defineEmits(['input'])

const myTinyInit = reactive({
  readonly: props.readonly, /* 只读模式 */
  width: '100%', /* 默认宽度 */
  height: 400, /* 默认高度 */
  language_url: '/tinymce/langs/zh_CN.js', /* 配置汉化 */
  language: 'zh_CN', /* 语言标识 */
  promotion: false, /* 不显示右上角图标 */
  branding: false, /* 不显示右下角logo */
  auto_update: false, /* 不进行自动更新 */
  resize: true, /* 可以调整大小 */
  menubar: props.readonly ? '' : 'file edit insert view format table', /* 菜单栏 */
  skin_url: '/tinymce/skins/ui/oxide', /* 手动引入CSS */
  content_css: '/tinymce/skins/content/default/content.css', /* 手动引入CSS */
  content_style: "img {max-width:100%;}",
  toolbar_mode: 'wrap',
  plugins: props.readonly ? '' : props.plugins, /* 插件 */
  toolbar: props.readonly ? '' : props.toolbar, /* 功能按钮 */
  powerpaste_allow_local_images: true,
  paste_auto_cleanup_on_paste: false,
  paste_remove_styles: false,
  paste_remove_styles_if_webkit: false,
  paste_strip_class_attributes: false,
  paste_as_text: false,
  paste_data_images: true,
  /* 图片上传方法（注意！！：要使用 promise 对象中的 resolve 返回图片路径，否则会报错） */
  images_upload_handler: (blobInfo) =>
    new Promise((resolve, reject) => {
      /* base64处理图片 */
      const img = 'data:image/jpeg;base64,' + blobInfo.base64()
      resolve(img)
    }),
})

const initContent = computed(() => {
  return props.modelValue
})

onMounted(() => {
  tinymce.init({})
})

const content = ref()
watch(
  initContent,
  (newVal) => {
    content.value = newVal
  },
  {deep: true, immediate: true}
)

watch(
  content,
  (newVal) => {
    emit('input', newVal)
  },
  {deep: true}
)
</script>

<style scoped lang="scss">
/* button宽度 */
:deep(.tox .tox-mbtn){
  width: unset !important;
}
</style>